<template>
  <!-- 顶部部分：不动 -->
  <div>
    <div class="top-image fullscreen-top"></div>
    <div class="list">
      <div class="item">
        <span class="item-text">项目介绍</span>
        <img src="@/assets/images/t-bg.png" alt="" class="item-icon" />
      </div>
    </div>
  </div>

<div class="project-page" v-loading="loading" element-loading-text="加载中...">



  <!-- 项目卡片区 -->
<div class="project-list">
  <h2 class="section-title">项目一览</h2>
  <el-row :gutter="24">
    <el-col
      v-for="item in projects"
      :key="item.id"
      :xs="24"
      :sm="12"
      :md="8"
      :lg="8"
    >
      <div class="project-card" @click="handleView(item.id)">
        <div class="image-box">
          <img src="@/assets/images/project-cover.jpg" alt="project" />
          <div class="overlay">
            <h3 class="card-title">{{ item.projectName }}</h3>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>

    <div v-if="!projects.length" class="no-data">
      <el-empty description="暂无项目数据" />
    </div>
  </div>

</div>
</template>

<script setup>
import { ref, onMounted, nextTick, computed } from 'vue'
import * as echarts from 'echarts'
import { ElMessage } from 'element-plus'
import { listPublicProject } from '../../api/projectSys/project'

const projects = ref([])
const loading = ref(false)
const chartRef = ref(null)

const fetchProject = async () => {
  loading.value = true
  try {
    const res = await listPublicProject({})
    if (res.code === 200 && res.rows) {
      projects.value = res.rows
      await nextTick()
      initChart()
    } else {
      ElMessage.error('获取项目数据失败')
    }
  } catch (e) {
    ElMessage.error('网络请求异常，请稍后重试')
  } finally {
    loading.value = false
  }
}

onMounted(fetchProject)

const uniqueDirections = computed(() => new Set(projects.value.map(p => p.directionId)).size)
const uniqueLeaders = computed(() => new Set(projects.value.map(p => p.leaderId)).size)

const handleView = id => {
  console.log('查看详情', id)
}

const formatDate = val => (val ? new Date(val).toLocaleDateString() : '-')

const initChart = () => {
  if (!chartRef.value) return
  const chart = echarts.init(chartRef.value)

  // 统计方向数据
  const directionCount = {}
  projects.value.forEach(p => {
    directionCount[p.directionId] = (directionCount[p.directionId] || 0) + 1
  })
  const data = Object.entries(directionCount).map(([name, value]) => ({ name, value }))

  chart.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' }
    },
    grid: { left: '5%', right: '5%', bottom: '5%', top: '10%', containLabel: true },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01],
      axisLine: { lineStyle: { color: '#c62828' } },
      splitLine: { lineStyle: { color: '#f5f5f5' } }
    },
    yAxis: {
      type: 'category',
      data: data.map(d => `方向 ${d.name}`),
      axisLine: { lineStyle: { color: '#c62828' } },
      axisLabel: { color: '#333' }
    },
    series: [
      {
        name: '项目数量',
        type: 'bar',
        data: data.map(d => d.value),
        barWidth: 20,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            { offset: 0, color: '#f44336' },
            { offset: 1, color: '#ffcdd2' }
          ]),
          borderRadius: [8, 8, 8, 8]
        },
        label: {
          show: true,
          position: 'right',
          color: '#b71c1c',
          fontWeight: 'bold'
        }
      }
    ]
  })
  window.addEventListener('resize', () => chart.resize())
}
</script>

<style scoped>
.project-page {
  padding-bottom: 100px;
}
/* 顶部图片区域 */
.top-image {
  width: 100%;
  height: 260px;
  background-image: url("@/assets/images/support-bg.jpg");
  background-position: center;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 6px 12px rgba(22, 93, 255, 0.2);
}

.list {
  display: flex;
  align-items: center;
  position: relative; /* 确保 ::after 的绝对定位相对于它 */
  z-index: 0; /* 默认最底层 */
}

.list::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -20px; /* 可根据需要调整对齐方式 */
  width: 100%;
  height: 90px; /* 背景条高度，可调整 */
  background-color: #eae4e4;
  z-index: 0; /* 背景在最底层 */
}

.list .item {
  position: relative; /* 保持原来的布局 */
  display: inline-block;
  margin-top: -30px;
  z-index: 1; /* 图片和文字覆盖灰色背景 */
}

.list .item-icon {
  display: block;
  position: relative;
  z-index: 1; /* 图片在灰色背景上 */
}

.list .item-text {
  position: absolute;
  left: 50%;
  top: 25%;
  transform: translateX(-50%);
  font-size: 32px;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  z-index: 2; /* 文字在最上层 */
}
/* 三栏统计卡片 */
.summary-section {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin: 40px auto 20px;
  flex-wrap: wrap;
}
.summary-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  width: 180px;
  text-align: center;
  padding: 20px 10px;
  transition: transform 0.3s ease;
}
.summary-card:hover {
  transform: translateY(-6px);
}
.summary-card h3 {
  color: #c62828;
  font-size: 30px;
  margin: 0;
}
.summary-card p {
  color: #666;
  font-size: 14px;
  margin-top: 6px;
}

.chart-section {
  width: 75%;
  margin: 40px auto 60px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 6px 16px rgba(183, 28, 28, 0.1);
  padding: 40px 20px;
}

.chart-title {
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  color: #b71c1c;
  margin-bottom: 20px;
}

.chart-container {
  height: 360px;
  width: 100%;
}
/* 项目卡片 */
.project-list {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px 60px;
}

.section-title {
  font-size: 22px;
  font-weight: 600;
  color: #b71c1c;
  text-align: left;
  margin: 30px 0 20px;
  border-left: 5px solid #b71c1c;
  padding-left: 10px;
}

/* 卡片整体 */
.project-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  margin-bottom: 30px;
}

.project-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 24px rgba(198, 40, 40, 0.25);
}

/* 图片 */
.image-box {
  position: relative;
  width: 100%;
  height: 220px;
}

.image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.project-card:hover img {
  transform: scale(1.05);
}

/* 悬浮层文字 */
.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
  color: white;
  opacity: 0.95;
  transition: all 0.3s ease;
  padding-bottom: 16px;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  padding: 0 10px;
  word-break: break-all;
}
</style>
